<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>xiaomi商城</title>
  <link rel="stylesheet" href="css/xiaomi商城.css">
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script>
  <link rel="stylesheet" href="https://at.alicdn.com/t/font_2086078_tshei6066b8.css">
</head>

<body>
  <!-- 头部 -->
  <div class="header">
  </div>
  <div class="header-title">
    <div class="title">
      <div class="title-left">
        <ul>
          <li><a href="#">小米商城</a></li>
          <li><span>|</span></li>
          <li><a href="#">MIUI</a></li>
          <li><span>|</span></li>
          <li><a href="#">loT</a></li>
          <li><span>|</span></li>
          <li><a href="#">云服务</a></li>
          <li><span>|</span></li>
          <li><a href="#">金融</a></li>
          <li><span>|</span></li>
          <li><a href="#">有品</a></li>
          <li><span>|</span></li>
          <li><a href="#">小爱开放平台</a></li>
          <li><span>|</span></li>
          <li><a href="#">企业团购</a></li>
          <li><span>|</span></li>
          <li><a href="#">资质证照</a></li>
          <li><span>|</span></li>
          <li><a href="#">协议规则</a></li>
          <li><span>|</span></li>
          <li><a href="#">下载app</a></li>
          <li><span>|</span></li>
          <li><a href="#">智能生活</a></li>
          <li><span>|</span></li>
          <li><a href="#">Select Location</Select></a></li>

        </ul>
      </div>
      <div class="title-right">
        <ul>
          <li><a href="#">登录</a></li>
          <li><span>|</span></li>
          <li><a href="#">注册</a></li>
          <li><span>|</span></li>
          <li><a href="#">消息通知</a></li>
        </ul>
        <button><i class="iconfont icon-gouwuche"></i>购物车( 0 )</button>
      </div>
    </div>
  </div>
  <!-- 上主体部分 -->
  <div class="up-center">
    <div class="up-first">
      <div class="first-left">
        <img src="images/小米24x24.png" alt="">
      </div>
      <div class="first-mid">
        <ul>
          <li><a href="#">小米手机</a></li>
          <li><a href="#">Redmi 红米</a></li>
          <li><a href="#">电视</a></li>
          <li><a href="#">笔记本</a></li>
          <li><a href="#">家电</a></li>
          <li><a href="#">路由器</a></li>
          <li><a href="#">智能硬件</a></li>
          <li><a href="#">服务</a></li>
          <li><a href="#">社区</a></li>
        </ul>
      </div>
      <div class="first-right">
        <input type="text" placeholder="家电">
        <button><i class="iconfont icon-sousuo"></i></button>
      </div>
    </div>
    <div class="swiper">
      <div class="swiper-title">
        <div class="pra">
          <div class="pra-one">
            <p>手机 电话卡</p>
            <span>></span>
          </div>
          <div class="pra-two">
            <p>电视 盒子</p>
            <span>></span>
          </div>
          <div class="pra-three">
            <p>笔记本 显示器</p>
            <span>></span>
          </div>
          <div class="pra-four">
            <p>家电 插线板</p>
            <span>></span>
          </div>
          <div class="pra-fiv">
            <p>出行 穿戴</p>
            <span>></span>
          </div>
          <div class="pra-six">
            <p>智能 路由器</p>
            <span>></span>
          </div>
          <div class="pra-seven">
            <p>电源 配件</p>
            <span>></span>
          </div>
          <div class="pra-eight">
            <p>健康 儿童</p>
            <span>></span>
          </div>
        </div>
      </div>
      <div class="swiper-content">
        <img src="images/1.jpg" alt="">
        <img src="images/2.webp" alt="">
        <img src="images/3.webp" alt="">
        <img src="images/4.webp" alt="">
        <img src="images/5.webp" alt="">
        <img src="images/6.webp" alt="">
      </div>
      <button id="left"></button>
      <button id="right"></button>
      <div id="btns">
        <span class="current"></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
  </div>

  <div class="color-content">
    <div class="content-one">
      <div class="icon-one">
        <div class="one">
          <i class="iconfont icon-clock"></i>
          <p>小米秒杀</p>
        </div>
      </div>
      <div class="icon-two">
        <div class="one">
          <i class="iconfont icon-qiye"></i>
          <p>企业团购</p>
        </div>
      </div>
      <div class="icon-three">
        <div class="one">
          <i class="iconfont icon-Fma"></i>
          <p>F码通道</p>
        </div>
      </div>
      <div class="icon-four">
        <div class="one">
          <i class="iconfont icon-SDqia"></i>
          <p>米粉卡</p>
        </div>
      </div>
      <div class="icon-fiv">
        <div class="one">
          <i class="iconfont icon-NewToOld"></i>
          <p>以旧换新</p>
        </div>
      </div>
      <div class="icon-six">
        <div class="one">
          <i class="iconfont icon-huafeichongzhi"></i>
          <p>话费充值</p>
        </div>
      </div>
    </div>

    <div class="content-two">

    </div>
    <div class="content-three">

    </div>
    <div class="content-four">

    </div>
  </div>
  <div class="center">
    <div class="center-content">
      <div class="center-title">
        <div class="left">
          <p>小米闪购</p>
        </div>
        <div class="right">
          <div>
            <span><i class="iconfont icon-zuojiantou"></i></span>
            <span><i class="iconfont icon-iconfontjiantou5"></i></span>
          </div>
        </div>
      </div>
      <div class="miaoShao">
        <div class="miaoShao-one"></div>
        <div class="miaoShao-two"></div>
        <div class="miaoShao-three"></div>
        <div class="miaoShao-four"></div>
        <div class="miaoShao-five"></div>
      </div>
      <div class="advertise"></div>
      <div class="phone-title">
        <div class="left">
          <p>手机</p>
        </div>
        <div class="right">
          <a href="#">查看全部</a>
          <a href="#"><i class="iconfont icon-rightarrow"></i></a>
        </div>
      </div>
      <div class="goods">
        <div class="left"></div>
        <div class="right">
          <div class="right-one">
            <img src="images/小米10至尊版.webp" alt="">
            <p class="name">小米10至尊版</p>
            <p class="camera">120X 变焦/120w秒充/120HZ屏幕</p>
            <p class="price">5299起</p>
          </div>
          <div>
            <img src="images/RedmiK30 至尊版.webp" alt="">
            <p class="name">Redmi K30 至尊版</p>
            <p class="camera">120HZ弹出全面屏,天机1000+处理器</p>
            <p class="price">1999起</p>
          </div>
          <div>
            <img src="images/腾讯黑鲨3S.webp" alt="">
            <p class="name">腾讯黑鲨3S</p>
            <p class="camera">骁龙865处理器,120HZ刷新率</p>
            <p class="price">3999起</p>
          </div>
          <div class="right-four">
            <img src="images/Redmi 9A.webp" alt="">
            <p class="name">Redmi 9A</p>
            <p class="camera">5000mA大电池</p>
            <p class="price">599起</p>
          </div>
          <div class="right-five">
            <img src="images/小米10青春版.webp" alt="">
            <p class="name">小米10青春版</p>
            <p class="camera">50倍潜望式变焦/轻薄5G手机</p>
            <p class="price">1899起 <span class="low-price">2099元</span></p>
          </div>
          <div class="right-six">
            <img src="images/小米10.webp" alt="">
            <p class="name">小米10</p>
            <p class="camera">骁龙865处理器/一亿像素</p>
            <p class="price">3799起 <span class="low-price">3999元</span></p>
          </div>
          <div class="right-seven">
            <img src="images/Redmi K30 Pro.webp" alt="">
            <p class="name">Redmi K30 Pro</p>
            <p class="camera">双模5G,骁龙865处理器,弹出全面屏</p>
            <p class="price">2699起 <span class="low-price">3399元</span></p>
          </div>
          <div class="right-eight">
            <img src="images/Redmi K30 Pro 变焦版.webp" alt="">
            <p class="name">Redmi K30 Pro 变焦版</p>
            <p class="camera">双模5G,骁龙865处理器,弹出全面屏</p>
            <p class="price">3399起 <span class="low-price">3999元</span></p>
          </div>
        </div>
      </div>
      <div class="redmi-x">
        <img src="images/Redmi 智能电视X.webp" alt="">
      </div>
      <div class="video">
        <div class="video-title">
          <div class="left">
            <p>视频</p>
          </div>
          <div class="right">
            <a href="#">查看全部</a>
            <a href="#"><i class="iconfont icon-rightarrow"></i></a>
          </div>
        </div>
        <div class="video-center">
          <div>
            <img src="images/Redmi 10Xx系列发布会.webp" alt="">
            <i class="iconfont icon-bofang"></i>
            <p>Redmi 10X系列发布会</p>
            <p>Redmi 10X系列发布会</p>
          </div>
          <div>
            <img src="images/小米10青春版发布会.webp" alt="">
            <i class="iconfont icon-bofang"></i>
            <p>小米10青春版发布会</p>
          </div>
          <div>
            <img src="images/小米10 8k手机拍大片.webp" alt="">
            <i class="iconfont icon-bofang"></i>
            <p>小米10 8k手机拍大片</p>
          </div>
          <div>
            <img src="images/小米10 发布会.webp" alt="">
            <i class="iconfont icon-bofang"></i>
            <p>小米10 发布会</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
  <div class="footer-text">
    <div class="text-top">
      <ul>
        <li><a href="#"><i class="iconfont icon-editor2"></i>预约维修服务</a></li>
        <li><span>|</span></li>
        <li><a href="#"><i class="iconfont icon-tianwuliyoutuihuo"></i>7天无理由退货</a></li>
        <li><span>|</span></li>
        <li><a href="#"><i class="iconfont icon-15tianmianfeihuanhuo24px"></i>15天免费换货</a></li>
        <li><span>|</span></li>
        <li><a href="#"><i class="iconfont icon-baoyou"></i>满99元包邮</a></li>
        <li><span>|</span></li>
        <li><a href="#"><i class="iconfont icon-shouhouwangdian"></i>520余家售后网点</a></li>
      </ul>
    </div>
    <div class="text-down">
      <div class="down-left">
        <div>
          <ul>
            <li>
              <p>帮助中心</p>
            </li>
            <li><a href="#">账户管理</a></li>
            <li><a href="#">购物指南</a></li>
            <li><a href="#">订单操作</a></li>
          </ul>
        </div>
        <div>
          <ul>
            <li>
              <p>服务支持</p>
            </li>
            <li><a href="#">售后政策</a></li>
            <li><a href="#">自助服务</a></li>
            <li><a href="#">相关下载</a></li>
          </ul>
        </div>
        <div>
          <ul>
            <li>
              <p>线下门店</p>
            </li>
            <li><a href="#">小米之家</a></li>
            <li><a href="#">服务网点</a></li>
            <li><a href="#">授权体验店</a></li>
          </ul>
        </div>
        <div>
          <ul>
            <li>
              <p>关于小米</p>
            </li>
            <li><a href="#">了解小米</a></li>
            <li><a href="#">加入小米</a></li>
            <li><a href="#">投资者关系</a></li>
            <li><a href="#">企业社会责任</a></li>
            <li><a href="#">廉洁举报</a></li>
          </ul>
        </div>
        <div>
          <ul>
            <li>
              <p>关注我们</p>
            </li>
            <li><a href="#">新浪微博</a></li>
            <li><a href="#">官方微信</a></li>
            <li><a href="#">联系我们</a></li>
            <li><a href="#">公益基金会</a></li>
          </ul>
        </div>
        <div>
          <ul>
            <li>
              <p>特色服务</p>
            </li>
            <li><a href="#">F 码通道</a></li>
            <li><a href="#">礼物码</a></li>
            <li><a href="#">防伪查询</a></li>
          </ul>
        </div>
      </div>
      <div class="down-mid">
      </div>
      <div class="down-right">
        <ul>
          <li>400-100-5678</li>
          <li>8:00-18:00(仅收市话费)</li>
          <li><i class="iconfont icon-rengongkefu">人工客服</i></li>
          <li>关注小米：<a href="#"><i class="iconfont icon-weibo"></i></a><a href="#"><i
                class="iconfont icon-weixin"></i></a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="footer">
    <div class="footer-center">
      <div class="footer-left">
        <img src="images/小米24x24.png" alt="">
      </div>
      <div class="footer-right">
        <div class="right-one">
          <ul>
            <li><a href="#">小米商城</a></li>
            <li><span>|</span></li>
            <li><a href="#">MIUI</a></li>
            <li><span>|</span></li>
            <li><a href="#">米家</a></li>
            <li><span>|</span></li>
            <li><a href="#">米聊</a></li>
            <li><span>|</span></li>
            <li><a href="#">多看</a></li>
            <li><span>|</span></li>
            <li><a href="#">游戏</a></li>
            <li><span>|</span></li>
            <li><a href="#">政企服务</a></li>
            <li><span>|</span></li>
            <li><a href="#">小米天猫店</a></li>
            <li><span>|</span></li>
            <li><a href="#">小米集团隐私政策</a></li>
            <li><span>|</span></li>
            <li><a href="#">小米公司儿童信息保护规则</a></li>
            <li><span>|</span></li>
            <li><a href="#">小米商城隐私政策</a></li>
            <li><span>|</span></li>
            <li><a href="#">小米商城用户协议</a></li>
            <li><span>|</span></li>
            <li><a href="#">问题反馈</a></li>
            <li><span>|</span></li>
            <li><a href="#">Select Location</a></li>
          </ul>
        </div>
        <div class="right-two">
          <p>© mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2020]0276-042号</p>
          <p>（京）网械平台备字（2018）第00005号 互联网药品信息服务资格证 (京)-非经营性-2014-0090 营业执照 医疗器械质量公告</p>
          <p>增值电信业务许可证 网络食品经营备案 京食药网食备202010048 食品经营许可证</p>
          <p>违法和不良信息举报电话：171-5104-4404 知识产权侵权投诉 本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
        </div>
        <div class="right-three">
          <div><i class="iconfont icon--truste"></i></div>
          <div><i class="iconfont icon-chengxinwangzhan"></i></div>
          <div>
            <p>诚信网站</p>
            <p>示范企业</p>
          </div>
          <div><i class="iconfont icon-kexinwangzhan"></i></div>
          <div>
            <p>可信网站</p>
            <p>信用评价</p>
          </div>
          <div><i class="iconfont icon-chengxinjingyingdian"></i></div>
          <div>
            <p>诚信经营</p>
            <p>放心消费</p>
          </div>
          <div><i class="iconfont icon-renzheng"></i></div>
        </div>
      </div>
    </div>
  </div>
  <div class="end">
    <p>让全球每个人都能享受科技带来的美好生活</p>
  </div>
  <div class="tools">
    <div>
      <a href="#"><i class="iconfont icon-shouji" ></i></a><br>
      <a href="#">手机APP</a>
    </div>
    <div>
      <a href="#"><i class="iconfont icon-tubiaozhizuomoban" ></i></a><br>
      <a href="#">个人中心</a>
    </div>
    <div>
      <a href="#"><i class="iconfont icon-editor2" ></i></a><br>
      <a href="#">售后服务</a>
    </div>
    <div>
      <a href="#"><i class="iconfont icon-service" ></i></a><br>
      <a href="#">人工客服</a>
    </div>
    <div>
      <a href="#"><i class="iconfont icon-gouwuche" ></i></a><br>
      <a href="#">购物车</a>
    </div>
  </div>
  <div class="roll-top">
    <a href="#"><i class="iconfont icon-huidaodingbu" ></i></a><br>
    <a href="#">回顶部</a>
  </div>
  <script>
    let index = 0;
    $("#right").click(function () {
      index++;
      if (index > 4) {
        index = 0;
      }
      animate(1000);
    })
    // 2.点击一下left index-- 达到下标志值
    $("#left").click(function () {
      index--;
      if (index < 0) {
        index = 4;
      }
      animate(1000);
    })

    // 点击焦点让对应下表的图片显示，重置下标值
    $("#btns span").click(function () {
      index = $(this).index();
      animate(1000);
    })

    function animate(speed) {
      $(".swiper-content img").eq(index).fadeIn(speed).siblings().fadeOut(speed);
      $("#btns span").eq(index).addClass("current").siblings().removeClass("current");
    }

    // 实现回到顶部的动画
    $(window).scroll(function(){
            let scrollTop = $(window).scrollTop();
            let opacity;
            console.log(scrollTop);
            opacity = scrollTop/200;

            if(scrollTop>=200){
            opacity=1;
        }
        
        $(".roll-top").css({opacity:opacity});
        }) 
        $(".roll-top").click(function(){
            $("html").animate({scrollTop:"0px"},1000);
        })
  </script>
</body>

</html>